<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>商品物流仓储管理系统</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="layui/layui/css/layui.css" media="all">
<link rel="stylesheet" href="layui/layui/css/modules/skin.css" media="all">
<link rel="stylesheet" href="css/main.css" media="all">
<!-- ExtJs-->
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="jquery/jquery.js"></script>
<script src="redischarts/highcharts.js"></script>
<script type="text/javascript" th:inline="javascript" src="businessjs/common.js" charset="utf-8"></script>
<script src="redischarts/index.js"></script>
<style>
body{background: white;}
</style>
</head>
<body>
<input type="hidden" id="contextPath" name="contextPath" th:value="${#request.getContextPath()}">
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
	<legend>Redis实时监控</legend>
</fieldset>
<div class="main-contain">
  <div class="layui-row layui-col-space15">
    <div class="layui-col-md6">
      <div class="layui-card">
        <div class="layui-card-header">Redis 内存实时占用情况：</div>
        <div class="layui-card-body">
          	<div>
		    	<div id="container"></div>
		    </div>
        </div>
      </div>
    </div>
    <div class="layui-col-md6">
      <div class="layui-card">
        <div class="layui-card-header">Redis key的实时数量：</div>
        <div class="layui-card-body">
			<div>
		    	<div id="keysChart"></div>
		    </div>
        </div>
      </div>
    </div>
    <div class="layui-col-md6">
      <div class="layui-card">
        <div class="layui-card-header">Redis INFO：</div>
        <div class="layui-card-body" style="height: 680px;">
          	<div style="height: 620px;overflow-y:auto;">
	          	<table class="layui-table">
					<thead>
						<tr>
							<th lay-data="{field:'key'}">key</th>
							<th lay-data="{field:'desctiption'}">描述</th>
							<th lay-data="{field:'value'}">值</th>
						</tr>
					</thead>
					<tbody>
						<tr th:each="info: ${infoList}">
							<td th:title="${info.key}+':'+${info.desctiption}" th:text="${info.key}"></td>
							<td th:text="${info.desctiption}"></td>
							<td th:text="${info.value}"></td>
						</tr>
					</tbody>
				</table>
			</div>
        </div>
      </div>
    </div>
    <div class="layui-col-md6">
      <div class="layui-card">
        <div class="layui-card-header">Redis实时日志(共<span th:text="${logLen}"></span>条)：
        <button class="layui-btn-danger layui-btn layui-btn-xs" style="float:right;margin-top: 10px;" onclick="empty();" ><i class="layui-icon">&#xe640;</i>清空日志</button>
        </div>
        <div class="layui-card-body" style="height: 680px;">
          	<div style="height: 620px;overflow-y:auto;">
	          	<table class="layui-table">
					<thead>
						<tr>
							<th lay-data="{field:'id',width:"10%"}">日志Id</th>
							<th lay-data="{field:'executeTime',width:'15%'}">响应时间</th>
							<th lay-data="{field:'usedTime'}",width:'10%'>耗时（ms）</th>
							<th lay-data="{field:'args'}",width:'60%'>页面请求（URL）</th>
						</tr>
					</thead>
					<tbody>
						<tr th:each="log: ${logList}">
							<td th:text="${log.id}"></td>
							<td th:text="${log.executeTime}"></td>
							<td th:text="${log.usedTime}"></td>
							<td><p style="width: 600px; word-wrap: break-word; word-break: normal;" th:text="${log.args}"></p></td>
						</tr>
					</tbody>
				</table>
			</div>
        </div>
      </div>
    </div>
  </div>
</div> 
<script src="layui/layui/layui.js"></script>
<script type="text/javascript">
layui.use('table', function(){
  var table = layui.table;
});
</script> 
</body>
</html>